CSS @function: Kohandatud funktsioonide definitsioonide võimsuse vallapäästmine

Kaskaadlaadistikud (CSS) on arenenud oluliselt kaugemale põhistiilimisest. Kaasaegne CSS annab arendajatele võimsad funktsioonid dünaamiliste, hooldatavate ja skaleeritavate disainide loomiseks. Üks selline funktsioon on @function reegel, mis võimaldab teil defineerida kohandatud funktsioone otse oma CSS-is, võimaldades korduvkasutatavat loogikat ja keerukaid arvutusi otse oma laadistikes.

Mis on CSS @function?

CSS-i @function reegel on sarnane funktsioonidele programmeerimiskeeltes nagu JavaScript, Python või PHP. See võimaldab teil defineerida koodiploki, mis teostab kindla ülesande ja tagastab väärtuse. Seda väärtust saab seejärel kasutada CSS-i omadustes, muutes teie laadistikud dünaamilisemaks ja paindlikumaks. Selle asemel, et tugineda ainult staatilistele väärtustele või sisseehitatud calc() funktsioonile, saate luua kohandatud arvutusi ja teisendusi, mis on kohandatud teie konkreetsetele disainivajadustele.

Erinevalt CSS-i mixin'itest (mida kasutatakse sageli eelprotsessorites nagu Sass ja Less), mis sisuliselt kopeerivad ja kleebivad koodiplokke, tagastab @function tegelikult väärtuse. See muudab need ideaalseks arvutuste ja teisenduste tegemiseks sisendparameetrite alusel.

Miks kasutada CSS @function?

Siin on mitu kaalukat põhjust, miks lisada @function oma CSS-i töövoogu:

• Korduvkasutatavus: Defineerige funktsioon üks kord ja kasutage seda uuesti kogu oma laadistikus, vähendades koodi dubleerimist ja parandades hooldatavust. See on eriti kasulik suurtes projektides.
• Dünaamiline stiilimine: Teostage arvutusi ja teisendusi CSS-i muutujate või muude dünaamiliste sisendite alusel, luues reageerivaid ja kohandatavaid disaine. See võimaldab nüansseeritumat kontrolli võrreldes ainult meediapäringutega.
• Teemad: Looge funktsioone värvipalettide, vahekauguste skaalade ja muude disainielementide genereerimiseks keskse teema alusel. See lihtsustab teemade loomist ja võimaldab lihtsat kohandamist.
• Keerukad arvutused: Käsitsege keerukaid matemaatilisi operatsioone või stringide manipuleerimisi, mis oleksid standardsete CSS-i funktsioonidega rasked või võimatud. Kujutage ette kuvasuhete arvutamist või keerukate gradientide genereerimist kohandatud loogika abil.
• Hooldatavus: Tsentraliseerige keeruline loogika funktsioonidesse, muutes oma CSS-i lihtsamini mõistetavaks, silutavaks ja muudetavaks. Kui on vaja muudatust, peate värskendama ainult funktsiooni definitsiooni, mitte sama arvutuse mitut eksemplari.

Veebilehitsejate tugi

@function reegel on tänapäevastes veebilehitsejates hästi toetatud. Viimaste uuenduste seisuga toetavad kõik suuremad brauserid (Chrome, Firefox, Safari, Edge) @function reeglit täielikult. Siiski kontrollige alati caniuse.com-i, et kinnitada uusimat brauserite ühilduvusteavet, eriti kui sihtite vanemaid brauseriversioone.

CSS @function süntaks

@function reegli põhisüntaks on järgmine:

            @function funktsiooni-nimi(parameeter1, parameeter2, ...) {
  // Funktsiooni keha (CSS kood)
  @return väärtus;
}

            

              
                Copy
              
            
          

Vaatame süntaksi lähemalt:

• @function: Märksõna, mis tähistab funktsiooni definitsiooni algust.
• funktsiooni-nimi: Funktsiooni nimi. Valige kirjeldav nimi, mis peegeldab funktsiooni eesmärki. Järgige CSS-i nimetamistavasid (väiketähed, sidekriipsudega eraldatud).
• (parameeter1, parameeter2, ...): Parameetrite loend, mida funktsioon aktsepteerib. Parameetrid on valikulised; funktsioonil võib olla null või rohkem parameetrit.
• { ... }: Funktsiooni keha, mis sisaldab CSS-koodi, mida täidetakse funktsiooni kutsumisel.
• @return väärtus;: @return lause määrab väärtuse, mille funktsioon tagastab. See on kohustuslik; iga funktsioon *peab* tagastama väärtuse. Väärtus võib olla mis tahes kehtiv CSS-väärtus, näiteks number, string, värv või pikkus.

Praktilised näited CSS @function kasutamisest

Et illustreerida @function võimsust, uurime mõningaid praktilisi näiteid:

1. Pikslite teisendamine REM-ideks

Levinud ülesanne veebiarenduses on piksliväärtuste teisendamine REM-ideks (root ems) parema ligipääsetavuse ja reageerivuse tagamiseks. Siin on funktsioon selle teisenduse automatiseerimiseks:

            @function rem($piksli-väärtus) {
  $rem-väärtus: $piksli-väärtus / 16;
  @return #{$rem-väärtus}rem;
}

body {
  font-size: 16px; // Baasfondi suurus
}

h1 {
  font-size: rem(32); // Vastab 32px-le
}

p {
  font-size: rem(16); // Vastab 16px-le
}

            

              
                Copy
              
            
          

Selles näites:

• Funktsioon rem() võtab sisendiks piksliväärtuse ($piksli-väärtus).
• See jagab piksliväärtuse 16-ga (brauseri vaikimisi fondi suurus), et arvutada vastav REM-väärtus.
• See tagastab arvutatud REM-väärtuse, millele on lisatud rem ühik.

Seda funktsiooni saab kasutada kogu oma laadistikus, et hõlpsasti teisendada piksliväärtusi REM-ideks, tagades ühtlase ja skaleeritava tüpograafia.

2. Värvipalettide genereerimine

Ühtlase värvipaleti loomine on hea disaini jaoks hädavajalik. Siin on funktsioon baasvärvi tooni genereerimiseks protsentuaalse väärtuse alusel:

            @function shade($värv, $protsent) {
  @return mix(black, $värv, $protsent);
}

$põhivärv: #007bff; // Näidis põhivärv (sinine)

.button {
  background-color: $põhivärv;
  border-color: shade($põhivärv, 20%); // 20% tumedam toon põhivärvist
  color: white;
}

            

              
                Copy
              
            
          

Selles näites:

• Funktsioon shade() võtab sisendiks värvi ($värv) ja protsendi ($protsent).
• See kasutab mix() funktsiooni (saadaval mõnes CSS-i eelprotsessoris), et segada baasvärv mustaga, luues tumedama tooni. Kui kasutate standardset CSS-i, kaaluge JavaScripti polüfilli või alternatiivset värvimanipulatsiooni funktsiooni.
• See tagastab genereeritud toonivärvi.

See funktsioon võimaldab teil hõlpsasti genereerida oma värvipaleti jaoks erinevaid toone, tagades visuaalse ühtsuse kogu teie disainis.

3. Kuvasuhte arvutamine

Kuvasuhte säilitamine on reageerivate piltide ja videote jaoks ülioluline. Siin on funktsioon elemendi kõrguse arvutamiseks selle laiuse ja kuvasuhte alusel:

            @function aspect-ratio-height($laius, $suhte-laius, $suhte-kõrgus) {
  @return $laius * ($suhte-kõrgus / $suhte-laius);
}

.responsive-image {
  width: 100%;
  height: aspect-ratio-height(100%, 16, 9); // 16:9 kuvasuhe
}

            

              
                Copy
              
            
          

Selles näites:

• Funktsioon aspect-ratio-height() võtab sisendiks laiuse ($laius), kuvasuhte laiuse ($suhte-laius) ja kuvasuhte kõrguse ($suhte-kõrgus).
• See arvutab kõrguse valemi alusel: laius * (suhte kõrgus / suhte laius).
• See tagastab arvutatud kõrguse väärtuse.

See funktsioon tagab, et element säilitab määratud kuvasuhte, kui selle laius muutub, luues reageeriva ja visuaalselt meeldiva paigutuse.

4. Varuvariantide ja ühikute käsitlemine

Funktsioone saate kasutada ka erinevate ühikute käsitlemiseks või varuvariantide pakkumiseks juhuks, kui konkreetne CSS-i funktsioon pole toetatud. Näiteks võite soovida kasutada fondi suuruste jaoks vw ühikuid, kuid pakkuda piksli varuvarianti vanematele brauseritele, mis vw-d ei toeta.

            @function responsive-font-size($viewport-width, $min-font-size, $max-font-size) {
  $calculated-size: calc(#{$min-font-size} + (#{$max-font-size} - #{$min-font-size}) * ((100vw - 320px) / (1200px - 320px)));
  @return clamp($min-font-size, $calculated-size, $max-font-size);
}

h1 {
  font-size: responsive-font-size(100vw, 20px, 40px); //Fondi suurus vahemikus 20px kuni 40px vastavalt ekraani suurusele
}

            

              
                Copy
              
            
          

See näide kasutab clamp() funktsiooni, et tagada fondi suuruse püsimine määratud miinimum- ja maksimumväärtuste piires. Kui clamp() ei ole toetatud, kasutab brauser calc() väärtust, mis pakub reageerivat fondi suurust vastavalt vaateakna laiusele.

Parimad praktikad CSS @function kasutamisel

Et tagada teie @function kasutuse efektiivsus ja hooldatavus, järgige neid parimaid praktikaid:

• Valige kirjeldavad nimed: Andke oma funktsioonidele selged ja kirjeldavad nimed, mis peegeldavad nende eesmärki. See muudab teie koodi lihtsamini mõistetavaks ja hooldatavaks. Näiteks kasutage `calculate-padding` asemel lihtsalt `calc`.
• Hoidke funktsioonid fookuses: Iga funktsioon peaks täitma ühte, hästi määratletud ülesannet. Vältige liiga keerukate funktsioonide loomist, mis tegelevad mitme vastutusalaga.
• Kasutage parameetreid targalt: Kasutage parameetreid, et muuta oma funktsioonid paindlikuks ja korduvkasutatavaks. Vältige väärtuste kõvakodeerimist funktsiooni kehas.
• Dokumenteerige oma funktsioonid: Lisage kommentaare, et selgitada, mida iga funktsioon teeb, milliseid parameetreid see aktsepteerib ja millise väärtuse see tagastab. See on eriti oluline keerukate funktsioonide puhul.
• Testige oma funktsioone: Testige oma funktsioone põhjalikult, et tagada nende ootuspäraste tulemuste andmine erinevates stsenaariumides. Kasutage erinevaid sisendväärtusi ja äärmuslikke juhtumeid võimalike probleemide tuvastamiseks.
• Mõelge jõudlusele: Kuigi @function võib olla võimas, võivad keerukad arvutused mõjutada jõudlust. Optimeerige oma funktsioone, et minimeerida nende mõju renderdamisajale. Kasutage sobivates kohtades vahemälustrateegiaid.
• Kasutage CSS-i muutujaid: Integreerige CSS-i muutujad, et kontrollida funktsiooni käitumist ja muuta oma funktsioonid kergesti kohandatavaks. See võimaldab kasutajatel muuta disaini aspekte ilma CSS-i funktsioonikoodi ennast muutmata.
• Olge ühikutega tähelepanelik: Veenduge, et teie funktsioon kasutab õigeid ühikuid, vastasel juhul ei pruugi teie arvutus ootuspäraselt toimida. Lisage alati ühik tagastatavale väärtusele.

@function vs. Mixin'id (Sass/Less)

Kui olete tuttav CSS-i eelprotsessoritega nagu Sass või Less, võite mõelda, kuidas @function võrdleb mixin'itega. Kuigi mõlemad funktsioonid edendavad koodi korduvkasutust, teenivad nad erinevaid eesmärke:

• @function: Tagastab väärtuse. Ideaalne arvutusteks, teisendusteks ja väärtuste genereerimiseks CSS-i omaduste jaoks.
• Mixin'id: Kaasavad CSS-koodi ploki. Ideaalne stiilide kogumi rakendamiseks elemendile.

Mõelge sellest nii: @function on nagu funktsioon programmeerimiskeeles, samas kui mixin on nagu makro või koodilõik. Valige sobiv tööriist vastavalt konkreetsele ülesandele.

Siin on näide, mis illustreerib erinevust:

            /* @function (Sass) */
@function double($number) {
  @return $number * 2;
}

.element {
  width: double(10px); // Väljund: width: 20px;
}

/* Mixin (Sass) */
@mixin rounded-corners($radius) {
  border-radius: $radius;
  -moz-border-radius: $radius; /* Vanemate Firefoxi versioonide jaoks */
  -webkit-border-radius: $radius; /* Vanemate Safari/Chrome'i versioonide jaoks */
}

.box {
  @include rounded-corners(5px);
}

            

              
                Copy
              
            
          

Selles näites tagastab double() funktsioon väärtuse (kahekordistatud numbri), samas kui rounded-corners() mixin kaasab CSS-koodi ploki (border-radius omadused).

Integreerimine CSS muutujatega

@function tõeline võimsus tuleb esile, kui seda kombineerida CSS-i muutujatega (kohandatud omadused). CSS-i muutujad võimaldavad teil defineerida korduvkasutatavaid väärtusi, mida saab hõlpsasti uuendada ja muuta. Kasutades oma funktsioonides CSS-i muutujaid, saate luua väga kohandatavaid ja dünaamilisi laadistikke.

Siin on näide CSS-i muutujate kasutamisest koos @function-ga elementidevahelise vahe kontrollimiseks:

            :root {
  --base-spacing: 16px;
}

@function spacing($multiplier) {
  @return var(--base-spacing) * $multiplier;
}

.element {
  margin-bottom: spacing(2); // Väljund: margin-bottom: 32px (16px * 2);
}

.another-element {
  margin-top: spacing(0.5); // Väljund: margin-top: 8px (16px * 0.5);
}

            

              
                Copy
              
            
          

Selles näites määratleb --base-spacing CSS-muutuja baasvahe ühiku. Funktsioon spacing() korrutab selle baasvahe antud kordajaga, et arvutada tegelik vahe väärtus. Muutes --base-spacing väärtust, saate hõlpsasti kohandada vahekaugusi kogu oma laadistikus ilma funktsiooni ennast muutmata.

Täpsemad tehnikad ja kaalutlused

Tingimusloogika funktsioonide sees

Kuigi CSS ei ole täisväärtuslik programmeerimiskeel, saate oma @function sees kasutada tingimusloogikat erinevate stsenaariumide käsitlemiseks. Eelprotsessori direktiive nagu `@if` (Sass) ja `@when` (Less) saab kasutada hargnevaks loogikaks.

            @function text-color($background) {
  @if (lightness($background) > 50%) {
    @return #000; // Tagasta must heledate taustade jaoks
  } @else {
    @return #fff; // Tagasta valge tumedate taustade jaoks
  }
}

.element {
  background-color: #eee;
  color: text-color(#eee); // Väljund: color: #000;
}

            

              
                Copy
              
            
          

See funktsioon valib dünaamiliselt tekstivärvi vastavalt taustavärvi heledusele, tagades hea kontrasti ja loetavuse.

Vigade käsitlemine ja valideerimine

Ootamatu käitumise vältimiseks on ülioluline käsitleda võimalikke vigu ja valideerida oma funktsioonides sisendväärtusi. Kuigi CSS-il pole sisseehitatud veakäsitlusmehhanisme, saate kasutada tingimusloogikat kehtetu sisendi kontrollimiseks ja vaikeväärtuse tagastamiseks või hoiatusteate kuvamiseks.

Näide (Sass):

            @function calculate-padding($size) {
  @if type-of($size) != number {
    @warn "Invalid padding size.  Please provide a numerical value.";
    @return 0px; // Vaikimisi 0px
  }
  @return $size * 2;
}

.element {
  padding: calculate-padding("small"); // Käivitab hoiatuse
}

            

              
                Copy
              
            
          

Nimeruumid

Nimekonfliktide vältimiseks, eriti suurtes projektides, kaaluge oma funktsioonide jaoks nimeruumide kasutamist. Saate luua eesliite kõigile oma kohandatud funktsioonidele, et eristada neid sisseehitatud CSS-funktsioonidest või teiste teekide funktsioonidest. Näiteks võite lisada kõigile oma funktsioonidele eesliite `my-` (nt `my-rem()`, `my-shade()`).

Kokkuvõte

@function reegel on võimas täiendus CSS-ile, võimaldades teil luua korduvkasutatavaid, dünaamilisi ja hooldatavaid laadistikke. Selle funktsiooni valdamisega saate avada uue paindlikkuse ja kontrolli taseme oma disainide üle, parandades oma töövoogu ja luues keerukamaid ja kaasahaaravamaid kasutajakogemusi. Alates lihtsatest ühikute teisendustest kuni keerukate värvimanipulatsioonideni annab @function teile võimaluse kirjutada puhtamat ja tõhusamat CSS-koodi. Katsetage esitatud näidetega ja uurige @function võimalusi oma järgmises projektis, et tõsta oma CSS-i oskusi ja luua tõeliselt reageerivaid ja skaleeritavaid disaine.